<template>
  <div class="cPage">
    <div class="view" v-if="viewType === 'page'">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="formInline.searchKey"
            placeholder="请输入搜索关键字"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getArticleList">查询</el-button>
          <el-button type="" @click="createEditNewAd" style="margin-left:30px"
            >新增专家</el-button
          >
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="createDate" label="创建时间">
          <template slot-scope="scope">
            <span>
              {{ scope.row.createDate | moment("YYYY-MM-DD hh:mm:ss") }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="job" label="职务"> </el-table-column>
        <el-table-column prop="desc" label="介绍"> </el-table-column>
        <el-table-column prop="weight" label="权重"> </el-table-column>
        <el-table-column label="大图" align="center">
          <template slot-scope="scope">
            <a :href="scope.row.smallImage" target="_blank"
              ><img class="inlineImg" :src="scope.row.smallImage" alt=""
            /></a>
          </template>
        </el-table-column>
        <el-table-column label="小图" align="center">
          <template slot-scope="scope">
            <a :href="scope.row.smallImage" target="_blank"
              ><img class="inlineImg" :src="scope.row.smallImage" alt=""
            /></a>
          </template>
        </el-table-column>
        <el-table-column label="可用状态" width="100" align="center">
          <template slot-scope="scope">
            <span>
              <el-tag :type="scope.row.status ? 'success' : 'info'">{{
                adStatus[scope.row.status]
              }}</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button
              @click="createEditNewAd(scope.row, true)"
              type="text"
              size="small"
            >
              编辑
            </el-button>
            <el-button
              @click="handleCurrentStatus(scope.row)"
              type="text"
              size="small"
            >
              {{ scope.row.status ? "下架" : "上架" }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="edit" v-if="viewType === 'editArticle'">
      <Edit
        :originForm="originForm"
        :isEdit="isEdit"
        :closeEditModal="closeEditModal"
      />
    </div>
  </div>
</template>
<script>
import Edit from "./edit";
import { adStatus } from "@/config/ad";

export default {
  components: {
    Edit,
  },
  data() {
    return {
      viewType: "page",
      adStatus,
      formInline: {
        searchKey: "",
      },
      tableData: [],
      // 表单相关
      isEdit: false,
      originForm: {
        status: 1,
        name: "",
        weight: 1,
        job: "教授",
        desc: "描述",
      },
    };
  },
  methods: {
    closeEditModal() {
      this.getArticleList();
      this.viewType = "page";
    },
    createEditNewAd(config, isEdit) {
      this.isEdit = isEdit;
      this.originForm = isEdit ? config : this.originForm;
      this.viewType = "editArticle";
    },
    handleCurrentStatus(config) {
      this.$confirm(
        `是否确认 ${config.status ? "下架" : "上架"} 文章 [${config.name}]?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.$axios
          .put(
            `/api/qw/professor/${config.uuid}.json?_method=put`,
            Object.assign({}, config, { status: Number(!config.status) })
          )
          .then((response) => {
            this.$message.success("操作成功");
            this.getArticleList(config);
          });
      });
    },
    getArticleList() {
      const { formInline } = this;
      const params = {
        type: "ZX",
        searchKey: formInline.searchKey,
      };
      this.$axios.get("/api/qw/professor.json", { params }).then((response) => {
        this.tableData = response.list;
      });
    },
  },
  created() {
    this.closeEditModal();
  },
};
</script>
<style lang="scss" scoped>
.cPage {
  padding: 30px 15px;
}
.edit {
  margin: 0px 40px 0 0;
}
</style>
